<template>
  <div class="console">
    <a-layout class="console-body">
      <a-layout-header class="header-content">
        <div class="header-logo">
          <img class="logo" src="../assets/images/header-logo.png" alt />
          <a-menu
            theme="dark"
            mode="horizontal"
            :selectedKeys="[$route.path]"
            v-if="$route.path !=='/console/configuration/newsDetail/index'"
          >
            <template v-for="v in menuData">
              <a-menu-item :key="v.name" @click="jumpRouter(v)">
                <span>{{ v.text }}</span>
              </a-menu-item>
            </template>
          </a-menu>
        </div>
        <div class="header-user">
          <a-dropdown
            :trigger="['hover']"
            @click="e => e.preventDefault()"
            style="minWidth: 90px;height:50px;margin-right:15px"
          >
            <div style="display:inline-block">
              <img :src="userInfo.photo" alt />
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                {{cname}}
                <a-icon type="down" />
              </a>
            </div>
            <a-menu slot="overlay" class="sys-opts">
              <a-menu-item key="0" @click="settings">设置</a-menu-item>
              <a-menu-item @click="logout" key="1">退出</a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content class="main-content" style="width:100%">
        <div class="content">
          <div class="main-box">
            <router-view></router-view>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
    <UserInform
      :inform-visible="informVisible"
      :inform-data="informData"
      @saveFunc="saveFunc"
      @refreshLabelInput="refreshLabelInput"
      @closeFunc="informVisible=false"
    />
  </div>
</template>

<script>
import { outlogin, getUserInfo } from "@/api/login";
import meun from "@/router/meun";
import { mapState, mapGetters, mapMutations } from "vuex";
import UserInform from "components/configuration/user/userInform";
export default {
  components: {
    UserInform,
  },
  data() {
    return {
      cname: JSON.parse(localStorage.getItem("userInfo")).cname,
      photo: "",
      collapsed: false,
      menuData: [],
      loginName: "admin",
      informData: {},
      informVisible: false,
    };
  },
  mounted() {
    this.menuData = meun();
    if (this.$route.path === "/console/" || this.$route.path === "/console") {
      this.$router.push(
        this.menuData[0].name,
        () => {},
        (e) => {
          console.log("输出报错", e);
        }
      );
    }
    this.getUserInform();
  },
  methods: {
    //点击设置打开个人设置弹窗
    settings() {
      // if (JSON.stringify(this.informData) === "{}") {
      this.getUserInform();
      // }
      this.informVisible = true;
    },
    //点击注销
    logout() {
      outlogin()
        .then((res) => {
          //登出
          localStorage.removeItem("TOKEN");
          localStorage.removeItem("refreshToken");
          localStorage.removeItem("userInfo");
          localStorage.removeItem("permission");
          localStorage.removeItem("userType");
          this.$router.push("/login");
          this.$message.destroy();
          this.$message.success(res.msg);
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //更新列表
    refreshLabelInput() {
      this.getUserInform();
    },
    //获取当前个人设置详情
    getUserInform() {
      getUserInfo()
        .then((res) => {
          let data = res.data;
          this.informData = data;
          this.$store.commit("SET_USERINFO", { photo: data.photo});
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    saveFunc() {
      console.log("点击了确定");
      this.informVisible = false;
      localStorage.setItem("photo", this.photo);
    },
    // 相同路由禁止跳转，后续如果需要刷新可以改变?参数
    jumpRouter(user) {
      const { path } = this.$route;
      const { name } = user;
      if (name === path) {
        return;
      }
      this.$router.push(name);
    },
  },
  computed: {
    ...mapGetters(["userInfo", "userAvatar"]),
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.console
  height 100%
  .ant-layout-header
    padding 0 20px
    background url('../assets/images/header-bg.jpg') no-repeat
    background-size cover
  font-size 16px !important
  .ant-menu-dark, .ant-menu-dark .ant-menu-sub
    background rgba(255, 255, 255, 0)
  .console-body
    height 100%
    .header-content
      position fixed
      z-index 1009
      width 100%
      display flex
      align-items center
      justify-content space-between
      .header-logo
        display flex
        align-items center
        justify-content flex-start
      img.logo
        margin-right 150px
      .header-user
        img
          width 30px
          height 30px
          display inline-block
          border-radius 50%
          margin-right 5px
    .main-content
      margin 0 auto
      margin-top 76px
      width 1210px
      .content
        height 100%
        .main-box
          height 100%
</style>
